2021-07-19Movidea Development Diary

https://gyazo.com/7f992e21a62701c5b74dbb7f46e5914e

---

I have a feeling that Movidea's recent development is diary style like this page, but not like pRegroup or pKeicho, because "the structure may be generated after the fact".

Because when the week opened up and I wanted to continue, it took me a while to find the last page.

By the end of the week, what I wrote over the weekend will have sunk in.

I'm going to write something on pMovidea over the weekend that I thought "I'll do this next week".

In the principle of trying something that makes you uneasy as soon as possible, next time you should try to select a range of items against the DOM.

I'll do this.

Representation of a rectangular range by the DOM

Creating a div by dragging start in canvas

How to organize the mouse event, it was chaotic last time too.

There's already a group drag that's split into separate files at the start and end, and that's not good.

For now, it's all in one.

Should it be a single state transition diagram?

Intersection judgment with rectangular range

Whether to select by partial intersection or whole inclusion

Do you allow some of the group to choose?

An image that does not allow

https://gyazo.com/6a6e4e44896ffa94875026803d31033a

Maybe it's better not to BORDER?

https://gyazo.com/98018d5b2d2252fc48a31e5bdb3d21f4

It seems useless to recalculate the bounding box when there is no content update, but caching the bounding box value and recalculating it appropriately is also "introducing an extra state", so we should first calculate it naively and cover it with a test, then measure it and cache it only if it is slow. I think we should put in a system to cache only if it is slow.

I was able to do it.

Create test cases

Place about 9 sticky notes and select

https://gyazo.com/7f992e21a62701c5b74dbb7f46e5914e

code:test.ts

cy.get("#canvas").trigger("mousedown", 150, 150);

cy.get("#canvas").trigger("mouseup", 450, 450);

cy.movidea((m) => {

cy.wrap(m.getGlobal().selected_items).should("to.deep.equal", [

"0,0",

"0,1",

"1,0",

"1,1",

]);

});

cy.get("#canvas").trigger("mousedown", 250, 250);

cy.get("#canvas").trigger("mouseup", 150, 150);

cy.movidea((m) => {

});

No, but extending assertions on your own is a pain because you have to write them in Chai.

code:index.ts

Cypress.Commands.add("getGlobal", (callback: (g: State) => unknown) => {

return cy.movidea((movidea) => {

return cy.wrap(callback(movidea.getGlobal()));

});

});

code:test.ts

cy.get("#canvas").trigger("mousedown", 250, 250);

cy.get("#canvas").trigger("mouseup", 150, 150);

Well, I guess that's about it.

Can you move the selection?

A single drag move used the DragDrop API, but this time there are multiple

Putting it in one DIV?

And there's a selection DIV.

Do we use for to update the position of each ID?

subtle

Put the DOM of the selected item in the selection div at the time of either mouse down in the selection or the completion of the selection.

---